<template>
  <el-dialog title="Update" width="30%" class="importDialog" :visible.sync="visible" :show="show"
    @close="$emit('update:show', false)">

    <div style="position: relative;">
      <div style="padding: 20px;">
        Expiration Date：
        <el-date-picker v-model="expiredate" type="date" value-format="yyyy-MM-dd" style="width: 150px;"
          @input="handleDateChange">
        </el-date-picker>
      </div>
      <div style="padding: 20px;">
        <el-upload ref="uploadAvatar" class="avatar-uploader" action="#" :show-file-list="false"
          :on-change="changeAvatar" :auto-upload="true" :http-request="vgetUploadHandler()" name="file" :limit="1">
          <el-button slot="trigger" size="small" type="primary">Select file</el-button>
          <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">Upload to server</el-button>
        </el-upload>
        <div v-if="contractfile">
          <a style="font-size: 12px;padding-top: 20px;" :href="contractfile" target="_blank">{{contractfile}}</a>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">Cancel</el-button>
      <el-button type="primary" @click="visible = false">Submit</el-button>
    </span>

  </el-dialog>
</template>

<script>
  import {
    store as uploadImg
  } from "@/api/medias";
  import {
    productindex,
    update as productcontracup,
    index as prowarlist
  } from "@/api/inventory";
  export default {
    name: "Uploadinv",
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      module: {
        type: String,
        default: "",
      },
      id: {
        type: Number,
        default: "",
      },
      contractfile: {
        type: String,
        default: "",
      },
      expiredate: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        contractfile: this.contractfile,
        expiredate: this.expiredate,
        id: this.id,
        visible: this.show,
        fileReader: new FileReader(),
      };
    },
    watch: {
      show() {
        this.visible = this.show;
      },
    },
    methods: {
      handleDateChange(value) {
        this.expiredate = value
        this.$forceUpdate()
      },
      vdelcart() {
        this.contractfile = ""
        this.$forceUpdate()
      },
      vgetUploadHandler() {
        return (options) => {
          this.uploadHandlev(options);
        };
      },
      async uploadHandlev(options) {
        const file = options.file;
        if (file) {
          this.fileReader.readAsDataURL(file);
        }
        this.fileReader.onload = () => {
          const formData = new FormData();
          formData.append("file", file);
          uploadImg(formData)
            .then((res) => {
              console.log(res, "qwqwqwqqwqwqwqwqwwq")
              var {
                data
              } = res;
              this.$message.success(res.status);
              this.contractfile = data.url
              this.$forceUpdate()
            })
            .catch((err) => {
              if (err.response.status === 422) {
                const {
                  info,
                  fileName
                } = err.response.data;
                this.$message.error(info);
              }
            });
        };
      },
      changeAvatar(file, fileList) {
        console.log("sssssssssssssssssss")
        const reader = new window.FileReader();
        reader.readAsDataURL(new Blob([file.raw]));
        reader.onload = (e) => {
          // this.formData.image = reader.result;
          // this.imageUrl = reader.result;
          // this.isUploadFile = true;
          console.log(reader.result, "9999999999999999999")
        };
      },
      async submitUpload() {
        let {
          info
        } = await productcontracup({
          id: this.id,
          action: "upfile",
          expiredate: this.expiredate,
          contractfile: this.contractfile
        });
        this.$message.success("Status update successful");
        this.visible = false
      },
    },
  };
</script>

<style>
  .importDialog>>>.el-dialog__body {
    padding-top: 5px;
  }
</style>